<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <style>
        /*CSS魔方效果以及动画*/
        /*1.将容器container放中间*/
        #container{
            width: 500px;
            height: 500px;
            margin: 200px auto;/*居中*/
        }
        /*2.魔方整体搭建*/
        .box{
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;  /*设置3D坐标轴：XYZ轴*/
            transform: rotateX(45deg) rotateY(45deg);
            /*动画复合属性: 关键帧名字 过渡时间 过渡样式 无限次*/
            animation: mofang 10s linear infinite;
        }
        /*手翻书---关键帧---理解：1秒钟闪过动作图片*/
        @keyframes mofang {
            0%{transform: rotateX(45deg) rotateY(45deg);}
            70%{transform: rotateX(180deg) rotateY(180deg);}
            100%{transform: rotateX(360deg) rotateY(360deg);}
        }
        /*3.6个面6个颜色,6个面：宽与高一致（公共面）*/
        /*3.1 公共面 :6个面宽高一致*/
        .page{
            width: 300px;
            height: 300px;
            position: absolute;/*元素归到一个位置上*/
        }
        .page_top{
            background: #12ecec;  /*颜色必须用16进制*/
            transform: translateZ(150px);  /*向上位移*/
        }
        .page_bottom{
            background: #e31d0d;
            transform: translateZ(-150px);  /*向下位移*/
        }
        .page_left{
            background: #dab71c;
            transform: translateX(-150px) rotateY(90deg);
        }
        .page_right{
            background: #c00eb6;
             transform: translateX(150px) rotateY(90deg);
        }
        .page_before{
            background: #0fd715;
            transform: translateY(150px) rotateX(90deg);
        }
        .page_after{
            background: #130fde;
            transform: translateY(-150px) rotateX(90deg);
        }

    </style>
</head>
<body>
<!--总体思路：HTML结构+CSS动画-->
<!--1.搭建HTML结构:魔方6个面：div(空间:有宽没高)--增加外围div(魔方整体)
    增加最外围div（容器区域：存放魔方---魔方整体在中间显示）
-->
         <div id="container">
    <div class="box">
<div class="page_top page"></div>
<div class="page_bottom page"></div>
<div class="page_left page"></div>
<div class="page_right page"></div>
<div class="page_before page"></div>
<div class="page_after page"></div>
    </div>
         </div>
</body>
</html>

